<template>
<div class="icons">
<swiper>
<swiper-slide v-for="page of pages" :key="page.id">
<div class="icon"
v-for="item of page"
:key="item.id"
>
    <div class="icon-img">
    <img class="icon-img-content" :src="item.imgUrl"/>
    </div>
    <p class="icon-desc">{{item.desc}}</p>
</div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
export default {
  name: "HomeIcons",
  data () {
      return {
          iconList: [{
              id: '001',
              imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
              desc:'景点1'
          } ,{
              id: '002',
              imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
              desc:'景点2'
          } ,{
              id: '003',
              imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
              desc:'景点3'
          },{
              id: '004',
              imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
              desc:'景点4'
          },{
              id: '005',
              imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
              desc:'景点5'
          },{
              id: '006',
              imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
              desc:'景点6'
          },{
              id: '007',
              imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
              desc:'景点7'
          },{
              id: '008',
              imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
              desc:'景点8'
          },{
              id: '009',
              imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
              desc:'景点90000000000'
          }]
      }
  },
  //计算属性
  computed: {
      pages() {
          const pages = []
          this.iconList.forEach((item,index) =>{
              const page = Math.floor(index / 8)
              if (!pages[page]) {
                  pages[page] = []
              }
              pages[page].push(item)
          })
          return pages
      }
  }

};
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl'

.icons >>> .swiper-container {
    margin-top 5px;
    height :0;
    padding-bottom :50%;

}
.icon{
    position :relative;
    height :0;
float :left;
width :25%;
padding-bottom :25%;
}
.icon-img{
    position :absolute;
    top:0;
    left :0;
    right :0;
    bottom :.44rem;  
}
.icon-img .icon-img-content{
    display :block;
    margin :0 auto;
    height :100%;
}
.icon-desc{
    ellipsis()
    position:absolute;
    bottom :0;
    left :0;
    right :0;
    height  :.44rem;
    line-height : .44rem;
    text-align center;
    color :#444;
}
</style>
